<template>
  <div
    class="w-[100%] flex items-center justify-center"
    style="height: calc(100% - 50px)"
    v-if="hasPerm(['system:monitoring'])"
  >
    <a-card class="w-[600px]" title="系统监控">
      <a-table :data="monitoringServices" :pagination="false" :bordered="false">
        <template #columns>
          <a-table-column title="服务名称" data-index="name" />
          <a-table-column title="服务描述" data-index="description" />
          <a-table-column title="操作">
            <template #cell="{ record }">
              <a-button type="primary" size="small" @click="openMonitoring(record.url)">
                打开监控
              </a-button>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-card>
  </div>
  <div class="w-[100%] flex items-center" style="height: calc(100% - 50px)" v-else>
    <a-empty>
      <template #image>
        <icon-close-circle-fill />
      </template>
      <span>暂无访问权限，请联系管理员分配权限</span>
    </a-empty>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { hasPerm } from "~/utils/sys.js";

// 获取当前环境的基础URL
const baseUrl = import.meta.env.VITE_REQUEST_URL || "http://localhost:9000/minimalist";
const baseUrlWithoutPath = baseUrl.substring(0, baseUrl.lastIndexOf("/minimalist"));

// 定义多个微服务监控地址
const monitoringServices = ref([]);

// 根据环境初始化监控服务
onMounted(() => {
  // 根据当前环境动态设置监控地址
  const gatewayPort = import.meta.env.VITE_GATEWAY_PORT || "9090";
  const basicPort = import.meta.env.VITE_BASIC_PORT || "9091";
  const lindiPort = import.meta.env.VITE_LINDI_PORT || "9092";
  const tenantPort = import.meta.env.VITE_TENANT_PORT || "9093";

  // 获取主机地址（去掉端口）
  const hostAddress = baseUrlWithoutPath.replace(/:\d+$/, "");

  monitoringServices.value = [
    {
      name: "网关服务",
      description: "Gateway 服务监控",
      url: `${hostAddress}:${gatewayPort}/minimalist/monitoring`,
    },
    {
      name: "基础服务",
      description: "Basic 服务监控",
      url: `${hostAddress}:${basicPort}/minimalist/monitoring`,
    },
    {
      name: "林地服务",
      description: "Lindi 服务监控",
      url: `${hostAddress}:${lindiPort}/minimalist/monitoring`,
    },
    {
      name: "租户服务",
      description: "Tenant 服务监控",
      url: `${hostAddress}:${tenantPort}/minimalist/monitoring`,
    },
  ];
});

// 打开监控页面
const openMonitoring = (url) => {
  window.open(url, "_blank");
};
</script>
<style scoped>
.arco-card {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.arco-table-tr {
  cursor: pointer;
}
</style>
